<template>
	<view class="detail">

		<view class="box3">


			<image :src="goods.pic" style="width: 750rpx; height: 750rpx;" mode="aspectFill"></image>



			<view class="" style="color: #1BA784; font-size: 2rem; margin-left:10px;">
				￥{{goods.minPrice}}
			</view>
			<view class="" style="color: #969799; font-size:1rem; margin-left:10px;">
				价格 ￥<text class="box1">{{goods.originalPrice}}</text>
			</view>
			<view class="" style=" font-size:1.5rem; margin-left:10px;">
				{{goods.name}}
			</view>
			<view class="" style="color: #969799; font-size:1rem; margin-left:10px;">
				{{goods.characteristic}}
			</view>
			<view class="box2" style="color: #969799; font-size:1rem;">
				<view class=""> 运费 包邮</view>
				<view class=""> 剩余 {{goods.stores}}</view>
			</view>
		</view>
		<view class="box9" style="display: flex; justify-content: space-between;" @click="show = true" @open="open"
			@close="close">
			<view class="">
				领券
			</view>
			<view class="" style=" color: #969799;">
				>
			</view>
		</view>
		<view class="box4">

			<view style="color: #969799;">
				服务
			</view>
			<view class="">
				收货后结算 · 支持退款
			</view>
		</view>
		<view class="box6">
			<view class="box5" style=" font-size:1rem;" @click="fn1">

				<view class="">评价(5)</view>

				<view class="" style="color: #969799;"> 全部评价 ></view>
			</view>
			<view class="" style="display: flex; margin: 10px; justify-content: space-between;">
				<view class="" style="display: flex;">

					<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="60rpx" height="60rpx" radius="50%">
					</u--image>
					<text style="line-height: 60rpx; margin:0 10px;">ju****s</text>


				</view>
				<u-rate :count="count" v-model="value"></u-rate>
			</view>
			<view class="" style="margin:0 10px; padding-bottom: 20px; color: #969799;">
				系统默认好评
			</view>
		</view>
		<view class="box7">
			<view class="" style="display: flex; justify-content:center; align-items: center;">
				<view class="" style="margin-right: 20px; color: #969799;">//////</view>

				<view class="" style="font-size: 2rem; font-weight: 800;">商品详情</view>
				<view class="" style="margin-left: 20px; color: #969799;">//////</view>
			</view>

			<view class="u-content" style="color: #E03E2D; padding: 10px;">
				<u-parse :content="content"></u-parse>
			</view>


		</view>
		<view class="box8" style="display: flex; position:fixed; bottom:0; width:100%; align-items: center;">
			<view class="" style="display: flex; justify-content:space-around;flex:1;">

				<view class="" style="text-align: center;" @click="fn">
					<u-icon name="thumb-up" color="#000" size="64"></u-icon>
					首页
				</view>
				<view class="" style="text-align: center;" @click="showToast">

					<u-icon name="chat" color="#000" size="64"></u-icon>
					客服
				</view>
				<view class="" style="text-align: center;" @click="fn2">
					<u-icon name="shopping-cart" color="#000" size="64"></u-icon>
					购物车
				</view>
			</view>
			<view class="" style="flex:1; display: flex; margin:10px;">
				<u-button class="btn1" type="success" :plain="true" text="加入购物车" @click="show2 = true" @open="open2"
					@close="close2"></u-button>
				<u-button class="btn2" type="success" text="立即购买" @click="show3 = true" @open="open3" @close="close3">
				</u-button>
				<!-- <u-button text="加入购物车" color="#d9f6eD" shape="circle" size="large "></u-button>
				<u-button text="立即购买" color="#1ba784" shape="circle" size="large "></u-button> -->
			</view>
		</view>
		<view>
			<u-popup :show="show" @open="open" @close="close" :round="10" mode="bottom" closeable
				closeIconPos="top-right">
				<view>
					<view class=""
						style="font-size: 4.73vw; text-align: center; border-bottom:1px solid #ccc; height: 80px; line-height: 80px;">
						优惠劵</view>
					<view class="" style="padding: 20px;">
						<view class="couponModule">
							<view class="number">
								<view class="money" style="margin-bottom: 1.33vw;">
									<text style="font-size: 8vw;">50</text>
									<text style="font-size: 3.2vw;">元</text>
								</view>
								<view class="condition">满50元可用</view>
							</view>
							<view class="text">
								<view class="name">满50减20</view>
								<view class="time" style="font-size: 3.2vw;color: #969799;;">
									<text>2022-04-24</text>至<text>2022-05-24</text>
								</view>
							</view>
						</view>
					</view>
					<view class="" style="padding: 0px 40px 20px 40px;">
						<u-button class="btn3" type="success" text="确定"></u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<u-popup :show="show2" @open="open2" @close="close2" :round="10" mode="bottom" closeable
			closeIconPos="top-right">
			<view>
				<view class="" style="display: flex; padding: 20px;">
					<view class="">
						<u--image src="https://dcdn.it120.cc/2022/02/04/fa78ff5e-553f-40f2-8c78-b7ab8ed8bd39.png"
							width="25.6vw" height="25.6vw" style="margin: 2.67vw 2.67vw 2.67vw 0;">
						</u--image>
					</view>
					<view class="">
						<view class="bigdq">
							<view class="ziti">{{goodq.name}}</view>
						</view>
						<view class="njao">
							<view class="yuan">￥</view>
							<view class="jiamw">1.00</view>
						</view>
						<view class="jawpa">
							剩余931件
						</view>
					</view>
				</view>
				<view class="">
					<view class=""
						style="display: flex; justify-content: space-between; line-height: 8vw; padding: 0vw 20px;">
						<view class="" style="font-size: 3.73vw;">购买数量</view>
						<view class="">
							<u-number-box v-model="value" @change="valChange" buttonSize="50"></u-number-box>
						</view>
					</view>
				</view>
				<view class="" style="padding: 20px;">
					<u-button class="btn4" type="success" text="确定"></u-button>
				</view>
			</view>
		</u-popup>

		<view>
			<u-popup :show="show3" @open="open3" @close="close3" :round="10" mode="bottom" closeable
				closeIconPos="top-right">
				<view>
					<view class="" style="display: flex; padding: 20px;">
						<view class="">
							<u--image src="https://dcdn.it120.cc/2022/02/04/fa78ff5e-553f-40f2-8c78-b7ab8ed8bd39.png"
								width="25.6vw" height="25.6vw" style="margin: 2.67vw 2.67vw 2.67vw 0;">
							</u--image>
						</view>
						<view class="">
							<view class="bigdq">
								<view class="ziti">实物商品（购买时需填写收货地址，支持售后）</view>
							</view>
							<view class="njao">
								<view class="yuan">￥</view>
								<view class="jiamw">1.00</view>
							</view>
							<view class="jawpa">
								剩余931件
							</view>
						</view>
					</view>
					<view class="">
						<view class=""
							style="display: flex; justify-content: space-between; line-height: 8vw; padding: 0vw 20px;">
							<view class="" style="font-size: 3.73vw;">购买数量</view>
							<view class="">
								<u-number-box v-model="value" @change="valChange1" buttonSize="50"></u-number-box>
							</view>
						</view>
					</view>
					<view class="" style="padding: 20px;">
						<u-button class="btn4" type="success" text="确定"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>

</template>

<script>
	import {
		goodsdetail,
	
		discountsCoupons,
		shoppingInfo
	} from "../../api/detail.js"
	export default {
		data() {
			return {
				count: 5,
				show: false,
				show2: false,
				show3: false,
				value: 2,
				content: `
										<p>【特别提醒】</p>
										<p>1.测试商品，仅限调试。</p>
										<p>2.下单消费，个人中心 -> 积分兑换 -> 兑换成余额进行消费。</</p>
										<p>2.实物商品购买时需要填写收货地址，订单使用快递发货。</p>
										<img src="https://dcdn.it120.cc/2022/02/04/fa78ff5e-553f-40f2-8c78-b7ab8ed8bd39.png" />
										`,
				ids: '',
				goods: {},
				goodq: {},
			



			}

		},
		methods: {
			getgoodsdetail() {
				goodsdetail({
					id: this.ids
				}).then(res => {
					this.goods = res.data.basicInfo

				})

			},
		
			getdiscountsCoupons() {
				discountsCoupons().then(res => {
					console.log(res, 3);

				})
			},
			getshoppingInfo() {
				shoppingInfo().then(res => {
					console.log(res, 4);
					this.goodq = res.data.items[0]
				})
			},
			fn() {

				uni.switchTab({
					url: "/pages/home/home"
				})
			},
			fn1() {

				uni.navigateTo({

					url: "/pages/putation/putation?id=" + this.ids
				})
			},
			fn2() {

				uni.switchTab({

					url: "/pages/cart/cart"
				})
			},
			open() {

				// console.log('open');                                                       
			},
			close() {
				this.show = false
				// console.log('close');
			},
			open2() {
				// console.log('open');
			},
			close2() {
				this.show2 = false
				// console.log('close');
			},
			open3() {
				// console.log('open');
			},
			close3() {
				this.show3 = false
				// console.log('close');
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			valChange1(e) {
				console.log('当前值为: ' + e.value)
			},
			showToast() {
				this.$refs.uToast.show({
					message: "未开放：客服",
				})
			}
		},

		// onReady(){
		// 	this.$nextTick(()=>{
		// 		this.getgoodsdetail()
		// 	})
		// },
		onShow() {
			this.getgoodsdetail()
			
			this.getdiscountsCoupons()
			this.getshoppingInfo()

		},
		onLoad(option) {
			this.ids = option.id

		}
	}
</script>

<style lang="scss">
	.detail {
		background-color: #F7F8FA;


	}

	.box3 {
		background-color: #fff;
		margin-bottom: 10px;



	}



	.box1 {
		text-decoration: line-through
	}

	.box2 {
		margin: 10px 0;
		border-top: 1px solid #F8F9F9;
		display: flex;
		justify-content: space-between;

		view {

			margin: 10px;

		}
	}

	.box4 {
		display: flex;
		background-color: #fff;
		margin: 10px 0;

		view {
			margin: 20px 10px;
		}
	}


	.box5 {


		margin: 10px 0;
		border-bottom: 1px solid #F8F9F9;
		display: flex;
		justify-content: space-between;


		view {

			margin: 10px;

		}
	}

	.box6 {
		background-color: #fff;
	}

	.box8 {
		background-color: #fff;
		padding: 20px 0;
	}

	.box9 {
		background-color: #fff;

		view {

			margin: 10px;

		}
	}

	.box7 {
		background-color: #fff;
		margin-top: 20px;
	}

	.btn1 {
		height: 50rpx;
		margin-top: 4px;
		color: #1ba784;
		background-color: #d9f6ef;
		border: 1px solid #d9f6ef;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
	}

	.btn2 {
		height: 50rpx;
		margin-top: 4px;
		color: #d9f6ef;
		background-color: #1ba784;
		border: 1px solid #1ba784;
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	.couponModule {
		display: flex;
		justify-content: center;
		border-radius: 5px;
		margin: 0 4vw;
		margin-bottom: 2.67vw;
	}

	.number {
		width: 34%;
		background-color: #fee;
		text-align: center;
		font-size: 3.2vw;
		padding: 5.33vw 0;
		color: #ff4b52;
		border-radius: 5px 0 0 5px;
	}

	.text {
		text-align: center;
		padding: 5.33vw 0;
		background-color: #fee;
		color: #ff4b52;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		border-radius: 0 5px 5px 0;
	}

	.name {
		font-size: 4.27vw;
		margin-bottom: 2.67vw;
		width: 60%;
		text-align: left;
	}

	.btn3 {
		height: 80px;
		line-height: 80px;
		color: #d9f6ef;
		background-color: #1ba784;
		border: 1px solid #1ba784;
		border-radius: 50px;
	}

	::v-deep.btn3 {
		span {
			font-size: 3.73vw;
		}
	}

	.ziti {
		font-size: 3.73vw;
	}

	.bigdq {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		flex-wrap: wrap;
		padding: 2.67vw 5.33vw 2.67vw 0;
	}

	.njao {
		display: flex;
		color: #1ba784;

		.yuan {
			font-size: 3.73vw;
			line-height: 60rpx;
		}

		.jiamw {
			font-size: 5.87vw;
			font-weight: 700;
		}
	}

	.jawpa {
		color: #969799;
	}

	.btn4 {
		height: 80px;
		line-height: 80px;
		color: #d9f6ef;
		background-color: #1ba784;
		border: 1px solid #1ba784;
		border-radius: 50px;
	}
</style>
